<template>
  <div class="home">
    <!-- banner -->
    <div class="homeimg">
      <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    </div>

    <div class="cmNav" @mouseover="On" @mouseout="Off">
    <el-menu
      default-active="2"
      class="el-menu-vertical-s"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <div class="cmNavOpen">
        <span class="el-icon-caret-right" style="color: white; text-align: center; line-height: 50px;"></span>
      </div>

      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
    </div>

    <div class="home-container">
      <span class="el-icon-search"></span>
      <el-input placeholder="区块高度/区块哈希/交易哈希" v-model="inputVal" clearable @keydown.enter.native="search(inputVal)"></el-input>
      <p>搜索区块/交易</p>
      <ul class="contract-list" v-if="endVal">
        <li>
          <h5>当前区块高度</h5>
          <p>
            <span>
              <ICountUp :startVal="startVal" :endVal="endVal" :decimals="decimals" :duration="duration" :options="options"/>
            </span>
          </p>
        </li>

        <li>
          <h5>总交易数</h5>
          <p>
            <span>
              <ICountUp :startVal="startVal" :endVal="endVal2" :decimals="decimals" :duration="duration" :options="options"/>
            </span>
          </p>
        </li>

        <li>
          <h5>应用总数</h5>
          <p>
            <span>
            <ICountUp :startVal="startVal" :endVal="endVal3" :decimals="decimals" :duration="duration" :options="options"/>
            </span>
          </p>
        </li>

        <li>
          <h5>合约总数</h5>
          <p>
            <span>
              <ICountUp :startVal="startVal" :endVal="endVal4" :decimals="decimals" :duration="duration" :options="options"/>
            </span>
          </p>
        </li>

        <li>
          <h5>历史最高TPS</h5>
          <p>
            <span>
              <ICountUp :startVal="startVal" :endVal="endVal5" :decimals="decimals" :duration="duration" :options="options"/>/s
            </span>
          </p>
        </li>
      </ul>
    </div>
    <!-- banner end -->

    <el-tabs v-model="activeName" style="width: 1000px; margin:0 auto; padding-top:270px">
      <el-tab-pane label="数据图" name="first">
        <!-- ECharts -->
        <div id="echart"></div>
        <!-- ECharts end -->
      </el-tab-pane>
      <el-tab-pane label="最新出块信息" name="second">
        <!-- table1 -->
        <div class="table1">
          <p style="float:left">
            <i class="el-icon-caret-right"></i>
            最新出块信息
          </p>
          <div style="float:right">
            <el-button type="primary" plain @click.native="getNewBlocks">刷新</el-button>
            <el-button type="primary" plain @click.native="goMore">显示更多</el-button>
          </div>
          
          <el-table :data="tableData" border stripe style="width:100%" v-loading="loading">
            <el-table-column prop="number" label="区块号"></el-table-column>
            <el-table-column prop="hash" label="区块hash">
              <template slot-scope="scope">
                <router-link :to="/HashDetail/+scope.row.hash">{{scope.row.hash}}</router-link>
              </template>
            </el-table-column>
            <el-table-column prop="txCount" label="交易数量"></el-table-column>
            <el-table-column prop="avgTime" label="打包时间">
              <template slot-scope="scope">
                {{scope.row.avgTime}}ms
              </template>
            </el-table-column>
            <el-table-column prop="writeTime" label="生成时间" :formatter="formatDate"></el-table-column>
          </el-table>
        </div>
        <!-- table1 end -->
      </el-tab-pane>
      <el-tab-pane label="最新交易" name="third">
        <!-- table2 -->
        <div class="table1">
          <p style="float:left">
            <i class="el-icon-caret-right"></i>
            最新交易</p>
          <div style="float:right">
            <el-button type="primary" plain @click.native="getNewDeal">刷新</el-button>
          </div>
          
          <el-table :data="tableData2" border stripe style="width:100%" v-loading="loading2">
            <el-table-column prop="Hash" label="交易hash">
              <template slot-scope="scope">
                <router-link :to="/Transaction/+scope.row.Hash">{{scope.row.Hash}}</router-link>
              </template>
            </el-table-column>
            <el-table-column prop="From" label="发起方"></el-table-column>
            <el-table-column prop="To" label="接收方"></el-table-column>
            <el-table-column prop="BlockNumber" label="所属区块"></el-table-column>
            <el-table-column prop="Timestamp" label="生成时间" :formatter="formatDate"></el-table-column>
          </el-table>
        </div>
        <!-- table2 end -->
      </el-tab-pane>
      <el-tab-pane label="节点信息" name="fourth">
        <!-- teble3 -->
        <div class="table1">
          <p style="float:left">
            <i class="el-icon-caret-right"></i>
            节点信息</p>
          
          <el-table :data="tableData3" border stripe style="width:100%">
            <el-table-column prop="Name" label="节点列表" width="180"></el-table-column>
            <el-table-column prop="Ip" label="节点IP" width="250"></el-table-column>
            <el-table-column prop="Location" label="位置"></el-table-column>
            <el-table-column prop="Status" label="运行状态"></el-table-column>
            <el-table-column prop="Delay" label="区块高度"></el-table-column>
          </el-table>
        </div>
        <!-- table3 end -->
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import ICountUp from 'vue-countup-v2';
// 引入基本模板
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/chart/lines')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/grid')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/axis')
require('echarts/lib/component/legend')

export default {
  name: 'Home',
  components: {
      ICountUp,
  },
  data () {
    return {
      inputVal: "",
      tableData: null,
      tableData2:null,
      tableData3: null,
      activeName: "first",

      startVal: 0,
      endVal: '',
      endVal2: '',
      endVal3: '',
      endVal4: '',
      endVal5: '',
      decimals: 0,
      duration: 2.5,
      options: {
          useEasing: true,
          useGrouping: true,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
      },

      loading: false,
      loading2: false,
    }
  },
  methods: {
    getNewBlocks: function () {
      this.loading = true;
      setTimeout(() => {
        this.$http.get("/api/blocks/last").then(data => {
          this.tableData = data.body.blocksSimpleResp
          this.loading = false;
        },err => {
          this.$alert('获取数据出错' + err.statusText, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        })
      }, 500);
      
    },

    getNewDeal: function () {
      this.loading2 = true;
      setTimeout(() => {
        this.$http.get("/api/transactions/last").then(data => {
          this.tableData2 = data.body.Transactions
          this.loading2 = false;
        },err => {
          this.$alert('获取数据出错' + err.statusText, '错误', {
            confirmButtonText: '确定',
            callback: action => {
                this.$message({
                type: 'info',
                message: `action: ${ action }`
                });
            }
          });
        })
      }, 500);
      
    },

    search: function (todo) {
      location.hash = "#/Search/" + todo
    },

    formatDate: function (row, column, cellValue, index) {
      return new Date(parseInt(cellValue)/1000/1000).toLocaleString(); 
    },

    goMore: function () {
      location.hash = "#/More/1"
    },
    getNodes: function () {
      this.$http.get("/api/chain/nodes").then(data => {
        this.tableData3 = data.body.Nodes
      })
    },
    getInfo: function () {
      this.$http.get("/api/platform/information").then(data => {
        this.endVal = data.body.BlockNum
        this.endVal2 = data.body.Count
        this.endVal3 = data.body.ApplicationCount
        this.endVal4 = data.body.ContractCount
        this.endVal5 = Math.ceil(data.body.Tps)
      })
    },

    getEcharts: function () {
      let chart = echarts.init(document.getElementById('echart'));
      chart.setOption({
        
        title: {
        text: '数据折线图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['当前区块高度','总交易数','应用总数','合约总数','TPS']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'当前区块高度',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'总交易数',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'应用总数',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'合约总数',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'TPS',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]

      })
    },

    On: function () {
      let cmNav = document.getElementsByClassName("cmNav")[0];
      let cmNavOpen = cmNav.getElementsByClassName("cmNavOpen")[0];
      let jt = cmNav.getElementsByTagName("span")[0]
      cmNav.style.transform = "translateX(0)";
      cmNavOpen.style.display = "none";
    },
    Off: function () {
      let cmNav = document.getElementsByClassName("cmNav")[0];
      let cmNavOpen = cmNav.getElementsByClassName("cmNavOpen")[0];
      let jt = cmNav.getElementsByTagName("span")[0]
      cmNav.style.transform = "translateX(-100%)";
      cmNavOpen.style.display = "block";
    },
  },
  created: function(){
    this.getInfo();
    this.getNewBlocks();
    this.getNewDeal();
    this.getNodes();
  },
  mounted: function () {
    this.getEcharts();
  }
}
</script>

<style>
.home{
  width: 100%;
}
.home .homeimg{
  width: 100%;
  height: 560px;
  position: absolute;
  z-index: 0;
}

#particles{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #1958b6;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
}

.cmNav{
  position: fixed;
  z-index: 20;
  top: 200px;
  width: 200px;
  transform: translateX(-200px);
  transition: all ease .4s;
}
.cmNavOpen{
  position: absolute;
  top: 80px;
  right: -20px;
  width: 20px;
  height: 50px;
  background-color: rgb(84, 92, 100);
  cursor: pointer;
}
.cmNavOpen span{
  text-indent: 2px;
}
.home-container{
  
  color: #c3c8cc;
  position: relative;
  width: 1000px;
  margin: 0 auto;
  height: 334px;
  padding-top: 154px;
  padding-bottom: 72px;
  text-align: center;
}

.home-container .el-input input{
    padding-left: 70px;
    padding-right: 48px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #c3c8cc;
    width: 800px;
    height: 64px;
    background-color: hsla(0,0%,100%,.1);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
}
.home-container .el-input .el-input__suffix{
  padding-right: 120px;
  margin-top: -8px;
}
.home-container .el-icon-search{
  
  font-size: 20px;
  position: absolute;
  top: 178px;
  left: 130px;
}

.home-container .contract-list{
  margin-top: 131px;
  padding-left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.home-container .contract-list li{
    color: hsla(0,0%,100%,.8);
    margin-bottom: 8px;
}
.home-container .contract-list li h5{
  font-size: 20px;
}
.home-container .contract-list li span{
  font-family: DIN;
  font-size: 36px;
  color: hsla(0,0%,100%,.8);
  font-weight: 700;
  font-stretch: condensed;
}
.home .table1{
  width: 1000px;
  margin: 30px auto;
  font-size: 13px;
  padding-bottom: 20px;
}
.home .table1 p{
  padding: 15px 0;
}
.home .table1 .cell{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#echart{
  width: 1000px;
  height: 350px;
  margin: 50px auto;
}


#particles-js{ 
  width: 100%; 
  height: 100%; 
  background-image: url('../assets/home-bg2.jpg'); 
  background-size: cover; 
  background-position: 50% 50%; 
  background-repeat: no-repeat; }
</style>
